import React, { Component } from 'react';
import { Button, DatePicker, Image, Row, Col, Input } from 'antd';
import { observer } from 'mobx-react';
import { history } from 'umi';
import { SearchOutlined } from '@ant-design/icons';
import styles from './newsAndAnno.less';
import Header from '../components/header/';
import Footer from '../components/footer';
import { newsStore } from '@/stores/newsStore';
import NewsIndexModel from '@/models/newsIndex';
@observer
export default class Appreciation extends Component {

  componentDidMount() {
    newsStore.listNews();

  }

  //
  inputChange(e: any) {
    // console.log(e);
    let key = e.target.name;
    let value = e.target.value;
    console.log(key);
    switch (key) {
      case 'title':
        newsStore.title = value;
        console.log(value);
        break;

      case 'organizer':
        newsStore.organizer = value;
        console.log(value);
        break

      //   break;
      // case 'endTime':
      //   newsStore.endTime = value;
      //   break;

      default:
        break;
      // 
    }
  }

  // onDateChange: ((value: Moment | null, dateString: string) => void) | undefined;
  inDateChage(props: Moment | null, dateString: string) {
    newsStore.startTime = dateString;
  }

  inDateChages(props: Moment | null, dateString: string) {
    newsStore.endTime = dateString;
  }
  render() {
    // const { RangePicker } = DatePicker;
    /**
     * 最新资讯
     */
    let list: Array<NewsIndexModel> = newsStore.newsList;
    let newsArr = [];
    for (let i = 0; i < list?.length; i++) {
      newsArr.push(
        <Row className={styles.now_container}>
          <Col span={10} className={styles.now_pic}>
            <div className={styles.now_pic_img} >
              <Image src={newsStore.imageURL + list[i].cover} className={styles.now_pic_img} />
            </div>
          </Col>
          <Col span={14} style={{ marginTop: 'auto', marginBottom: 'auto', paddingLeft: '10px' }}>
            {/* <div className={styles.now_title}>{list[i].title}</div> */}
            <div className={styles.now_title} onClick={() => history.push({ pathname: "/info", query: { id: list[i].id } })}>标题：{list[i].title}</div>
            <div className={styles.now_tips}>举办单位：{list[i].organizer}</div>
            <div className={styles.now_tips}>展览场地：{list[i].exhibitionArea}</div>
            {/* <RangePicker /> */}
            <div className={styles.now_tips}>开始时间：{list[i].startTime}</div>
            <div className={styles.now_tips}>结束时间：{list[i].endTime}</div>
          </Col>
        </Row> as never
      )
    }

    return (
      <div>
        <Header />
        <div className={styles.content_container}>
          <Row className={styles.search_box}>
            <Input
              placeholder="请输入展览名称"
              className={styles.input1}
              name='title'
              onChange={this.inputChange}
            />
            <Input
              placeholder="请输入主办方单位"
              name='organizer'
              className={styles.input1}
              onChange={this.inputChange}
            />
            <DatePicker
              name='startTime'
              placeholder='展览开始时间'
              onChange={this.inDateChage}
            />
            <DatePicker
              name='endTime'
              placeholder='展览结束时间'
              onChange={this.inDateChages}
            />
            <Button className={styles.search_btn} onClick={() => newsStore.listNews()}>搜索<SearchOutlined style={{ fontSize: '16px' }} /></Button>
            <Button onClick={() => newsStore.list1()}>重置 </Button>

          </Row>

          <div className={styles.now_devider}></div>
          <div className={styles.now_box}>
            <div className={styles.title_top}>最新资讯</div>
            {newsArr}
          </div>
        </div>
        <Footer />
      </div>
    )
  }
}